<template>
  <LoginFormTitle v-if="getShow" />
  <el-form
    ref="loginFormRef"
    :model="loginForm"
    :rules="loginFormRules"
    :status-icon="false"
    @keypress.enter="handleLogin"
    v-if="getShow"
  >
    <el-form-item
      prop="username"
      v-motion
      :initial="{ opacity: 0, y: 100 }"
      :enter="{ opacity: 1, y: 0, transition: { delay: 300 } }"
    >
      <el-input v-model="loginForm.username" :placeholder="$t('login.userPlaceholder')"></el-input>
    </el-form-item>
    <el-form-item
      prop="password"
      v-motion
      :initial="{ opacity: 0, y: 100 }"
      :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
    >
      <el-input
        v-model="loginForm.password"
        :placeholder="$t('login.PWPlaceholder')"
        show-password
      ></el-input>
    </el-form-item>
    <el-form-item
      style="margin-bottom: 10px"
      v-motion
      :initial="{ opacity: 0, y: 100 }"
      :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
    >
      <el-row>
        <el-col :span="12">
          <el-checkbox :label="$t('login.rememberMe')" v-model="loginForm.autologin"></el-checkbox>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button type="text">{{ $t('login.forgetPassword') }}？</el-button>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item
      v-motion
      :initial="{ opacity: 0, y: 100 }"
      :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
    >
      <el-button type="primary" round @click="handleLogin" style="width: 100%; height: 40px">{{
        $t('login.signIn')
      }}</el-button>
    </el-form-item>
  </el-form>
  <!-- 注册 -->
  <el-row
    :gutter="20"
    v-if="getShow"
    v-motion
    :initial="{ opacity: 0, y: 100 }"
    :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
  >
    <el-col :span="8">
      <el-button class="w-full" @click="setLoginState(LoginStateEnum.MOBILE)">{{
        $t('login.mobileLogin')
      }}</el-button>
    </el-col>
    <el-col :span="8">
      <el-button class="w-full" @click="setLoginState(LoginStateEnum.QR_CODE)">{{
        $t('login.qrcodeLogin')
      }}</el-button>
    </el-col>
    <el-col :span="8">
      <el-button class="w-full" @click="setLoginState(LoginStateEnum.REGISTER)">{{
        $t('login.register')
      }}</el-button>
    </el-col>
  </el-row>

  <!-- 其他登录方式 -->
  <div
    v-if="getShow"
    v-motion
    :initial="{ opacity: 0, y: 100 }"
    :enter="{ opacity: 1, y: 0, transition: { delay: 500 } }"
  >
    <el-divider>{{ $t('login.signInOther') }}</el-divider>

    <div class="login-oauth">
      <!-- <el-button size="small" type="success" circle icon="niu-icon-wechat" /> -->
      <el-icon color="#888" style="font-size: 30px" class="icon"><niu-icon-wechat /></el-icon>
      <el-icon color="#888" style="font-size: 25px" class="icon"><niu-icon-alipay /></el-icon>
      <el-icon color="#888" style="font-size: 25px" class="icon"><niu-icon-gitHub /></el-icon>
      <el-icon color="#888" style="font-size: 30px" class="icon"><niu-icon-niuOutline /></el-icon>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, computed, unref } from 'vue'
import LoginFormTitle from './LoginFormTitle.vue'
import { ElForm } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
import { LoginStateEnum, useLoginState } from '../useLogin'

export default defineComponent({
  name: 'LoginForm',
  components: { LoginFormTitle },
  setup() {
    const { t } = useI18n()
    const store = useStore()

    // 切换登录/注册/其他登录的表单
    const { setLoginState, getLoginState } = useLoginState()
    const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)

    const loginFormRules = {
      username: [
        {
          required: true,
          message: t('login.userError'),
          trigger: 'blur'
        },
        {
          pattern: /^[a-z0-9]{5,10}$/,
          message: t('login.userSubError'),
          trigger: 'blur'
        }
      ],
      password: [
        {
          required: true,
          message: t('login.PWError'),
          trigger: 'blur'
        },
        {
          pattern: /^[a-z0-9]{3,}$/,
          message: t('login.PWSubError'),
          trigger: 'blur'
        }
      ]
    }

    const loginFormRef = ref<InstanceType<typeof ElForm>>()

    const loginForm = reactive({
      username: 'admin',
      password: '123456',
      autologin: false
    })

    async function handleLogin() {
      let valid = await loginFormRef.value?.validate()
      if (valid) {
        store.dispatch('login/accountLoginAction', { ...loginForm })
      }
    }

    return {
      loginFormRef,
      loginFormRules,
      loginForm,
      handleLogin,
      LoginStateEnum,
      setLoginState,
      getShow
    }
  }
})
</script>

<style lang="scss" scoped>
.w-full {
  width: 100%;
}

.h-40 {
  height: 40px;
}

.login-oauth {
  display: flex;
  justify-content: space-around;

  .icon {
    transition: color 0.15s linear;
    cursor: pointer;

    &:hover {
      color: #5cb6ff;
    }
  }
}

/* 样式穿透 */
::v-deep(.el-input--small .el-input__inner) {
  height: 40px;
  line-height: 40px;
}

::v-deep(.el-input__suffix) {
  align-items: center;
}

::v-deep(.el-input__suffix-inner) {
  width: 100%;
  align-items: center;
}

::v-deep(.el-input__icon) {
  width: 25px;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all var(--el-transition-duration);
}
</style>
